<template>
  <div class="svg-list">
    <svg-icon class="svg-item" v-for="name in icons" :key="name" :name="name" size="30px" @click="copyCode(name)"></svg-icon>
  </div>
</template>
<script lang="ts">
import {defineComponent} from "vue"
import {copy} from "@/units/system";
import {useCloseMessageBox} from "@/hooks/DialogMsg";
import {ElMessage} from "element-plus";

const svgs = Object.keys(import.meta.glob(`@/assets/icon-svg/*.svg`))
export default defineComponent({
  setup() {
    /**
     * 全部SVG图标
     */
    let icons = svgs.map(item => {
      return item.split('/').pop().replace('.svg', '')
    })

    const close = useCloseMessageBox()

    /**
     * 复制图标代码
     * @param name
     */
    function copyCode(name) {
      copy(`<svg-icon name="${name}"/>`)
      ElMessage.success('复制成功')
      close()
    }

    return {
      icons,
      copyCode
    }
  }
})
</script>
<style lang="scss" scoped>
.svg-list {
  min-height: 400px;
  max-height: 600px;

  .svg-item {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 5px;
    cursor: pointer;
  }
}
</style>